<template>
	<!-- http://localhost:8080/#/pages/home/opusDetail/opusDetail -->
	<view id="opusDetail">
		<view @click="show=false">
			<view class="opusDetail_headImg">
				<view class="headImg" @click.stop="gotoP(list.uuid.id)">
					<u-avatar size="60" :src="list.uuid.headimg"></u-avatar>
				</view>
				<view class="content_right">
					<view class="content">
						<view class="name"  @click.stop="gotoP(list.uuid.id)">
							{{list.uuid.nickname}}
						</view>
						 
						<view class="content_iconType" @click.stop="updAndDel()" v-if="list.uuid.id == userInfo.id">
							<u-icon name="more-dot-fill" size="20"></u-icon>
							<view class="iconType_unfold" v-show="show">
								<view @click.stop="updDynamic(list.id)">编辑动态</view>
								<view @click.stop="DelDynamic(list.id)">删除动态</view>
							</view>
						</view>
					</view>
					<view class="time"  @click.stop="gotoP(list.uuid.id)">
						<time-dispose :dateTime="list.create_at"></time-dispose>
					</view>
				</view>
			</view>
			<!-- <view v-if="list.is_look==1" class="opusDetail_center" style="margin-bottom: 40rpx ;">
				<view class="isLook" @click="Pay(list)">
					<view class="isLookLock-fill" >
						<u-icon name="lock-fill"  color="#ffffff" size="60"></u-icon> 
					</view>
				</view>
			</view> -->
			<!-- <view class="opusDetail_center" v-if="list.is_look!=1">
				<view class="title">
					{{list.title}}
				</view>
				<view class="content">
					<view>{{list.content}}</view>
					<view class="content_image" v-if="!list.slider.length<1">
						<view v-for="(img,x) in list.slider" v-if="x<=8" class="ImgList">
							<image :src="img" mode="widthFix" @click="previewImage(x)" />
							<view class="ImgCount" v-if="x==8">
								<img-overrun :list="list.slider" :index="0"></img-overrun>
							</view>
						</view>
					</view>
					<view class="content_video" v-else>
						<view v-for="(vi,x) in list.video" v-if="x<=8" class="ImgList">
							<video :src="list.video"></video>
						</view>
					</view>
				</view>
				<view class="functionType">
					<view @click.stop="toggleLove(list)">
						<u-icon v-if="list.is_like==2" name="heart" color="red" :label="list.num_like"></u-icon>
						<u-icon v-else name="heart-fill" color="red" :label="list.num_like"></u-icon>
					</view>
					<view class="star" @click.stop="toggleCollect(list)">
						<u-icon v-if="list.is_collection==2" name="star" :label="list.num_collection"></u-icon>
						<u-icon v-else name="star-fill" color="#f3f301" :label="list.num_collection"></u-icon>
					</view>
					<view>
						<u-icon name="share-square" color="#9271d4" label="分享"></u-icon>
					</view>
				</view>
			</view> -->
<!-- 	{{list.is_look}}	 --> 
 <view class="opusDetail_center" >
     <!-- 半透明遮罩层 -->
     <view v-if="list.is_look == 1 && list.uuid.id != userInfo.id" class="overlay">
         <view class="lock-content" @click="payment(list.id,list.month_money,list.one_money,list.quarter_money)">
             <u-icon name="lock" color="#ff6600" size="40"></u-icon>
             <view class="unlock-text">点击付费解锁</view>
         </view>
     </view>
     
     <view class="content-wrapper" style="position: relative;">
         <view class="" >
             <view class="title">
                 {{ list.title }}
             </view>
             <view class="content">
                 <view>{{ list.content }}</view>
                 <view class="content_image" v-if="list.slider.length > 0">
                     <view v-for="(img, x) in list.slider" :key="x" v-if="x <= 8" class="ImgList">
                         <image :src="img" mode="widthFix" @click="previewImage(x)" />
                         <view class="ImgCount" v-if="x == 8">
                             <img-overrun :list="list.slider" :index="0"></img-overrun>
                         </view>
                     </view>
                 </view>
                 <view class="content_video" v-else>
                     <view class="ImgList" v-if="list.video">
                         <video :src="list.video"></video>
                     </view>
                 </view>
             </view>
             <view class="functionType">
                 <view @click.stop="toggleLove(list)">
                     <u-icon v-if="list.is_like == 2" name="heart" color="red" :label="list.num_like"></u-icon>
                     <u-icon v-else name="heart-fill" color="red" :label="list.num_like"></u-icon>
                 </view>
                 <view class="star" @click.stop="toggleCollect(list)">
                     <u-icon v-if="list.is_collection == 2" name="star" :label="list.num_collection"></u-icon>
                     <u-icon v-else name="star-fill" color="#f3f301" :label="list.num_collection"></u-icon>
                 </view>
                 <view>
                     <u-icon name="share-square" color="#9271d4" label="分享"></u-icon>
                 </view>
             </view>
         </view>
     </view>
 </view>
			<view class="Jump" v-if="list.uuid.id==userInfo.id">
				<view class="JumpButton" @click="gotoCDK(list.id)">查看体验码</view>
			</view>

			<!-- <view class="pagination">
				<view class="left">
					<view class="top">往前翻</view>
					<view>《大武》第一回</view>
				</view>
				<view class="right">
					<view class="top">往后翻</view>
					<view>《大武》第三回</view>
				</view>
			</view> -->

			<view class="opusDetail_comments">
				<view class="title">
					<view>评论{{remarksList.length}}</view>
					<view><button @click="gotoRemaks(list.id)">评论</button></view>
				</view>
				<view class="comment_text" v-for="(item,index) in remarksList">
					<view>
						<view class="section_head">
							<view class="headImg">
								<u-avatar :src="item.uuid.headimg"></u-avatar>
							</view>
							<view class="name">
								<view class="nameText">{{item.uuid.nickname}}</view>
								<view class="section_head_name">
									<time-dispose :dateTime="item.create_at"></time-dispose>
								</view>
							</view>
						</view>
						<view class="content_text">
							<view class="headImg"></view>
							<view class="name fonSize">{{item.content}}</view>
						</view>
						<view class="content_text">

							<view class="headImg"></view>
							<view class="name ThumbsUup">
								<view>
									<u-icon name="heart" v-if="!false" label="2" label-size="10"></u-icon>
									<u-icon name="heart-fill" color="red" v-else label="1" label-size="10"></u-icon>
								</view>
								<view style="display: flex;">
									<view class="custom-icon custom-icon-huifu" @click="gotoRemaks(list.id,item.id)">
										<text style="font-size: 24rpx;">回复</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="content_text" v-for="(childItem,childIndex) in item.children">
						<view class="headImg"></view>
						<view class="name">
							<view class="section_head">
								<view class="headImg">
									<u-avatar size="30" :src="childItem.uuid.headimg"></u-avatar>
								</view>
								<view class="section_head_name">
									<view class="nameText">{{childItem.uuid.nickname}}</view>
									<view class="name_date"><time-dispose
											:dateTime="childItem.create_at"></time-dispose></view>
								</view>
							</view>
							<view class="content_text">
								<view class="headImg"></view>
								<view class="name fonSize">{{childItem.content}}</view>
							</view>
							<view class="content_text">


								<view class="headImg"></view>
								<view class="name ThumbsUup">
									<view>
										<u-icon name="heart" v-if="!false" label="1" label-size="10"></u-icon>
										<u-icon name="heart-fill" color="red" v-else label="1" label-size="10"></u-icon>
									</view>
									<!-- <view style="display: flex;">
										<view class="custom-icon custom-icon-huifu">
											<text style="font-size: 24rpx;">回复</text>
										</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import imgOverrun from '../../../components/imgOverrunHandleIs/img-overrun.vue';
	import timeDispose from '../../../components/timeDispose/timeDispose.vue';
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		components: {
			imgOverrun,
			timeDispose
		}, //注册插件
		data() {
			return {
				list: [],
				remarksList: [], //评论列表
				inputText: '',
				show: false,
			}
		},
		onBackPress(event) {
			uni.switchTab({
				url: '/pages/tabBarHome/home'
			});
			return true;
		},
		computed: {
			...mapState('user', ['userInfo']),
			remainingCount() {
				// 确保 list.slider 存在且有至少一个元素
				if (this.list.slider && this.list.slider.length > 0) {
					// 确保 imageName 属性存在并且是一个数组
					const imageNames = this.list.slider;
					if (Array.isArray(imageNames)) {
						const totalImages = imageNames.length;
						console.log("计算剩余图片数量", totalImages);
						const remainingImages = totalImages - 8;

						// 确保不返回负数
						return Math.max(remainingImages, 0);
					}
				}

				// 如果 list.slider 为空或 imageName 不可用，返回 0
				return 0;
			}
		},
		onLoad(option) {
			console.log("option", option);
			this.getDynamicDetail(option.id)
		},
		mounted() {

		},
		
		methods: {
			Pay(item){
				item.is_look=2
			},
			updAndDel() {
				this.show = !this.show
			},
			gotoCDK(id) {
				uni.navigateTo({
					url: "/pages/home/CDKList/CDKList?dynamicId=" + id
				})
			},
			// 获取动态详情数据
			getDynamicDetail(id) {
				this.$api.getDynamicDetail({
					id: id
				}).then(res => {
					console.log("xiangqing", res)
					this.list = res.data
				})
				this.getViewComment(id); //评论
			},
			// 获取评论区的数据
			getViewComment(id) {
				console.log("一级评论", id)
				this.$api.getViewComment({
					dynamic_id: id, //动态id
				}).then(res => {
					console.log("res一级评论", res.data)
					this.remarksList = res.data
				})
			},
			gotoRemaks(dynamic_id, pid) {
				uni.navigateTo({
					url: "/pages/home/remarks/remarks?dynamic_id=" + dynamic_id + "&pid=" + pid
				})
			},
			// 修改动态详情
			updDynamic(id) {
				console.log(id, 'idid')
				uni.reLaunch({
					url: "/pages/posts/posts?id=" + id
				})
			},
			// 删除动态详情
			DelDynamic(id) {
				this.$api.getDynamicDel({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							message: '删除成功',
							duration: 1000
						})
						uni.reLaunch({
							url: "/pages/tabBarHome/home"
						})
					}
				})
			},
			// 切换点赞状态
			toggleLove(list) {
				list.is_like = list.is_like === 2 ? 1 : 2;
				// 更新喜欢数量
				list.num_like += list.is_like === 2 ? -1 : 1;
				this.$api.getDynamicPraise({
					dynamic_id: list.id
				}).then(res => {
					if (res.code == 1) {
						if (list.is_like == 1) {
							this.$refs.uToast.show({
								message: '点赞成功',
								duration: 1000,
								url: ""
							})
						} else {
							this.$refs.uToast.show({
								message: '取消点赞',
								duration: 1000,
								url: ''
							})
						}
					}
				})
			},
			// 切换收藏
			toggleCollect(list) {
				list.is_collection = list.is_collection === 2 ? 1 : 2;
				// 更新喜欢数量
				list.num_collection += list.is_collection === 2 ? -1 : 1;
				this.$api.getDynamicCollection({
					dynamic_id: list.id
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							message: res.info,
							bgColor: '#5ac725'
						})
					}
				})
				/* item.collect = !item.collect;
				this.$emit('update:initialValue', this.list) */
			},
			// 预览图片
			previewImage(index) {
				let photoList = this.list.slider.map(item => {
					return item;
				});
				uni.previewImage({
					current: index,
					urls: photoList
				});
			},
			//付费页面
			payment(id,month,one,quarter){
				let pure = {
					 id,
					 month,
					 one,
					 quarter
				}
				uni.navigateTo({
					url:'/pages/home/payHTML/payHTML?pure='+ encodeURIComponent(JSON.stringify(pure))
				})
			},
			gotoP(id) {
				uni.navigateTo({
					url: "/pages/home/PersonalData/PersonalData?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	#opusDetail {
		width: 100%;
	}

	.opusDetail_headImg {
		width: 90%;
		margin: auto;
		display: flex;
		align-items: center;
		height: 200rpx;

		.headImg {
			width: 120rpx;

		}

		.content_right {
			width: 80%;

			.content {
				width: 100%;
				text-indent: 1em;
				// border: 1px red solid;
				font-size: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.content_iconType {

					.iconType_unfold {
						width: 200rpx;
						position: absolute;
						// top: 4rem;
						// left: 19.5rem;
						right: 0;
						border: 1px #f9f9f9 solid;
						box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, 0.2);
						z-index: 9999;
						background-color: #fff;
						/* 阴影效果 */
						view {
							width: 200rpx;
							font-size: 24rpx;
							margin: 20rpx 0;
							text-indent: 2rem;
						}
					}
				}
			}

			.time {
				font-size: 24rpx;
				width: 120rpx;
				text-align: center;
				color: #c9c9c9;
			}
		}

	}
// .overlay {
//     position: absolute;
//     top: 0;
//     left: 0;
    
// }

 
	.isLook {
		position: absolute;
		width: 100%;
		height: 580rpx;
		 
		// z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;

		.isLookLock-fill {
			position: absolute;
			left: 45%;
			top: 430rpx;
			z-index: 999;
		}
	}

	.opusDetail_center {
		width: 90%;
		margin: auto;
		 position: relative; /* 确保 overlay 相对于这个元素定位 */
.overlay {
     position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(247, 247, 247, 0.5); /* 半透明背景 */
        backdrop-filter: blur(5px); /* 背景模糊效果 */
        z-index: 700; /* 确保在其他内容上面 */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        filter: mosaic(5px); /* 马赛克效果 */
}

.lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ff6600; /* 文本颜色 */
	
}

.unlock-text {
    margin-top: 10px; /* 锁图标和文字之间的间距 */
    font-size: 18px; /* 文本大小 */
}
		.title {
			font-weight: bold;
			font-size: 40rpx;
			line-height: 2;
		}

		.content {
			font-size: 30rpx;

			.content_image {

				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin: 20rpx 0;

				.ImgList {
					position: relative;
					width: 200rpx;
					margin: 10rpx;
					border: 1px #d5d5d5 solid;
					/* box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); */
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 100%;
						border-radius: 15rpx;
					}

					.ImgCount {
						position: absolute;
						width: 100%;
						height: 100%;
						margin: 0;
						margin: 0;
						top: 0;
						left: 0;
						right: 0;
						background: #313030;
						opacity: 0.7;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						border-radius: 15rpx;
					}
				}


			}

			.content_video {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				.ImgList {
					width: 100%;
					height: 450rpx;
					background-color: #000;
					
					image {
					
						width: 100%;
						height: 100%;
					}

					::v-deep uni-video {
						width: 100%;
						height: 100%;
					}
				}

			}
		}

		.functionType {
			height: 200rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.star {
				width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1px solid #f2f2f2;
				border-right: 1px solid #f2f2f2;
			}
		}
	}

	.Jump {
		width: 90%;
		margin: auto;
		padding: 40rpx 0;

		.JumpButton {
			width: 200rpx;
			height: 80rpx;
			border: 1px #ff6600 solid;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ff6600;
			color: #fff;
		}
	}

	.pagination {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-between;

		>view {
			width: 38%;
			padding: 40rpx 30rpx;
			font-size: 30rpx;
			color: #c9c9c9;
			border: 1px #f1f1f1 solid;
		}

		.top {
			font-weight: bold;
			color: #f4ba54;
		}
	}

	.opusDetail_comments {
		width: 90%;
		margin: auto;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 4;

			button {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 24rpx;
				background: #ff6600;
				border: #ff6600;
				color: #fff;
			}
		}

		.comment_text {
			width: 100%;

			.section_head,
			.content_text {
				display: flex;
				align-items: center;

				.headImg {
					width: 15%;
					border-radius: 1000rpx;

					image {
						width: 100%;
						border-radius: 1000rpx;
					}
				}

				.name {
					width: 85%;
					// border:1px red solid;
					font-size: 24rpx;
					color: #d3d4d3;
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.section_head {
						width: 100%;
					}
				}

				.fonSize {
					color: #000;
					line-height: 2;
					white-space: normal;
					/* 允许文本换行 */
					word-wrap: break-word;
					/* 允许长单词换行 */
					overflow-wrap: break-word;
					/* 确保长单词在需要时换行 */
				}

				.ThumbsUup {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					line-height: 2;

					view {
						width: 100rpx;
						// font-size: 24rpx;
					}
				}
			}


		}
	}
</style>